<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="Pragma" content="no-cache" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.css" />
		<script src="../js/jquery-2.0.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>	 
	
		 	<div class="navbar navbar-default pull-left" style="width: 100%; height:10px;margin: auto;">
					<ul class="breadcrumb" style="background: none;">
						<li>
						 <span>当前位置：</span>
						</li>
						<li>
							<a href="#"><span>菜单区</span></a>
						</li>
						<li>
							教师调查
						</li>
						<li style="color: red;">
							查看教师调查信息
						</li>
					</ul>
				</div>
		
		<div class="panel panel-default pull-right mantab">
			<div class="panel-body">
				<div>
					<i>调查日期：</i>
					<select id="date_sele" style="width: 10%;">
						<option></option>
					</select>
					<!--选择日期的下拉框-->
				</div>
				
				<table class="table">
					<tr id="tab">
						<th class="text-center">教师</th>
						<th class="text-center">课程</th>
						<th class="text-center">平均分</th>
						<th class="text-center">评分的人数</th>
						<th class="text-center">评分的详情</th>
					</tr>
				</table>
			</div>
		</div>

		<div class='modal fade' id='modal_detail' role='dialog' aria-hidden='true'>
			<div class='modal-dialog'>
				<div class='modal-content'>
					<div class='modal-header'>
						<button class='close' data-dismiss='modal' aria-hidden='true'>&times</button>
						<h4>详细的得分情况</h4>
					</div>
					<div class='modal-body'>
						<table id='info_table' border="1" style="margin-top: 30px;" class="table table-responsive table-condensed table-bordered">
						  
						</table>
					</div>
					<div class='modal-footer'>
							<button type='button' class='btn btn-default' data-dismiss='modal'>关闭</button>
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			$.ajax({ //填充时间下拉框
				type: "get",
				url: "/manage/getday",
				success: function(data) {
					$.each(data, function(index, dt) {
						$("#date_sele").append("<option class='date_app' value='" + dt + "'>" + dt + "</option>");
					});
				}
			});

			$("#date_sele").change(function(e) { //如果时间下拉框内容改变就改变表格内容
				var ele = e.target;
				$.ajax({
					type: "get",
					url: "getinfomanage/" + ele.value,
					success: function(data) {
						var html = "";
						var mid = 1;
						$.each(data, function(index, sd) {
							mid++;
							html += "<tr class='rows'><td>" + sd.teacherName + "</td>" +
								"<td>" + sd.coursesName + "</td>" +
								"<td>" + sd.avg + "</td>" +
								"<td>" + sd.score_Man + "</td>" +
								"<td>" +
								"<button class='btn dropdown-toggle' data-toggle='modal' data-target = '#modal_info" + mid + "'>详情</button>";
							html += "<div class='modal fade' id='modal_info" + mid + "' role='dialog' aria-hidden='true'>" +
								"<div class='modal-dialog'>" +
								"<div class='modal-content'>" +
								"<div class='modal-header'>" +
								"<button class='close' data-dismiss='modal' aria-hidden='true'>&times</button>" +
								"<h4>每个人的的评分</h4>" +
								"</div>" +
								"<div class='modal-body'>" +
								"<table class='table'>" +
								"<tr><th class='text-center'>学生编号：</th><th class='text-center'>得分</th><th class='text-center'>得分详细</th></tr>";
							$.each(sd.items, function(index2, info) {
								html += "<tr><td>" + info.session_Id + "</td><td>" + info.score_Num + "</td>" +
									"<td>" +
									"<button class='btn dropdown-toggle xiangxi' data-toggle='modal' data-target = '#modal_detail'>详细</button>" +
									 "<input value='"+info.suggest+"_";		
									 $.each(info.scoreDetails, function(ind,sco) {
									 	 html+=sco.score+"+";
									 });
								html +="' type='hidden'></td></tr>"; 
							});
							html += "</table></div></div></div></div>";
							html += "</td></tr>";
						});
						$(".rows").html("");
						$("#tab").after(html);

						$(".xiangxi").click(function() {
							var cli=$(this).next().val();                                      //保存建议和分数的input
							var hejitd=$(this).parent('td').parent('tr').children('td')[1];    //分数的td
							var heji=$(hejitd).text();                                        //分数的值 
							var inp=[];                                 //分数和建议
							inp=cli.split("_");                         //通过_分割   inp[0]是建议   inp[1]是分数                 
							var scores=[];                              //保存分数的集合
							scores=inp[1].split("+");	
							 
	
							
							$.ajax({ //点击显示分数细节
								type: "get",
								url: "../getsurveyitems",
								success: function(data) {
									detail_html = "<tr><th>序号</th><th>调查项目</th><th>调查内容</th><th>得分</th></tr>";
									$.each(data, function(index, si) {
										detail_html += "<tr><td rowspan=" + (si.conts.length + 1) + ">" + si.id + "</td>" +
											"<td rowspan=" + (si.conts.length + 1) + ">" + si.name + "</td></tr>";
										$.each(si.conts, function(i, cont) { //si.contents内容细节
											detail_html += "<tr><td>" + cont.name + "</td><td>" +scores[cont.id-1]+"</td>";
											detail_html+="</tr>";
										});
									});
									detail_html += "<tr><td>合计</td><td colspan='3'>"+heji+"</td></tr>"
									detail_html += "<tr><td>建议</td><td colspan='3'>"+inp[0]+"</td></tr>";
									$("#info_table").html(detail_html);
								}	
							});        
						})

						scoredown();
					}
				});
			});

			function scoredown() {
				$("button").click(function() {
					$(".hidden").slideToggle();
				});
			}
		</script>
		<style type="text/css">
			th,td{
				text-align: center;
				width: 20%;
			}
		</style>
	</body>

</html>